<template>
	<view class="course-item" :class="{column: isColumn}"
		@click="navTo(`/pages/course/course-details?id=${item.id}`)"
	>
		<view class="item-left">
			<image class="course-img" :src="item.mainImage" lazy-load></image>
			<view class="course-time">
				{{item.totalTime}}
			</view>
		</view>
		<view class="item-right column">
			<view class="title">{{item.title}}</view>
			<view class="info">
				<view class="nickname iconfont icon-laoshi2">{{item.nickName}}</view>
				<view class="count">
					<view v-if="item.isFree" class="money" >免费</view>
					<view v-else class="money iconfont icon-moneybag">
						{{ item.priceDiscount || item.priceOriginal }}
					</view>
					<view class="iconfont icon-video">{{item.studyTotal}} 人在学</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否纵向排列图片和文字
			isColumn: {
				type: Boolean, 
				default: false    // 默认为false，横向排列
			},

			item: {
				type: Object,    
				default: () => ({
					id: 1,                            
					mainImage: '/static/images/banner2.jpg', 
					totalTime: '00:59:38',            
					title: 'uni-app知行峰在线教育项目实战！', 
					nickName: '知行峰',                
					isFree: 0, // 是否收费0收费，1免费  
					priceOriginal: 999, // 原价       // 原始价格
					priceDiscount: 599, // 优惠价      // 折扣价格
					studyTotal: 399                   // 学习总人数
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 课程项样式 */
	.course-item {
		display: flex;                         // 弹性布局
		// 纵向排列
		// flex-direction: column;
		width: 100%;                          // 宽度100%
		padding: 20rpx 0;                     // 垂直内边距
		border-bottom: 1rpx solid #f1f1f1;    // 底部边框

		/* 左侧内容区域样式 */
		.item-left {
			position: relative;               // 相对定位
			width: 290rpx;                    // 宽度
			height: 160rpx;                   // 高度
			margin-right: 20rpx;              // 右外边距

			/* 课程图片样式 */
			.course-img {
				width: 290rpx;                // 宽度
				height: 160rpx;               // 高度
				border-radius: 10rpx;         // 圆角
			}

			/* 课程时长显示样式 */
			.course-time {
				position: absolute;           // 绝对定位
				bottom: 5rpx;                 // 距离底部
				right: 5rpx;                  // 距离右边
				font-size: 22rpx;             // 字体大小
				color: #fff;                  // 文字颜色
				background: rgba(51, 51, 51, 0.4); // 背景颜色
				border-radius: 20rpx;         // 圆角
				padding: 0 8rpx;              // 水平内边距
			}
		}

		/* 右侧内容区域样式 */
		.item-right {
			// display: flex;
			// flex-direction: column;
			justify-content: space-between;   // 两端对齐
			height: 160rpx;                   // 高度
			padding-top: 5rpx;                // 上内边距
			padding-left: 5rpx;               // 左内边距

			/* 课程标题样式 */
			.title {
				max-width: 365rpx;            // 最大宽度
				height: 70rpx;                // 高度
				line-height: 35rpx;           // 行高
				font-size: 28rpx;             // 字体大小
				font-weight: bold;            // 粗体

				// 显示两行，超出部分…显示
				overflow: hidden;             // 隐藏溢出
				text-overflow: ellipsis;      // 显示省略号
				-webkit-line-clamp: 2;        // 最多2行
				display: -webkit-box;         // 弹性盒模型
				-webkit-box-orient: vertical; // 垂直排列
				white-space: normal;          // 正常换行
			}

			/* 课程信息区域样式 */
			.info {
				/* 讲师昵称样式 */
				.nickname {
					font-size: 23rpx;         // 字体大小
					color: #999;              // 文字颜色
				}

				/* 数量信息区域样式 */
				.count {
					display: flex;            // 弹性布局
					align-items: center;      // 垂直居中

					/* 图标字体样式 */
					.iconfont {
						font-size: 23rpx;     // 字体大小
						color: #222222;       // 文字颜色
					}

					/* 价格样式 */
					.money {
						color: $mxg-color-orange; // 橙色主题
						width: 130rpx;            // 宽度
						font-size: 28rpx;         // 字体大小
					}
				}
			}
		}
	}
</style>
